<template>
	<view class="wrap">
		<view class="header">
			<view class="tab">
				<view :class="['item', navIndex == index ? 'active' : '']" v-for="(item, index) in navList" @click="handleNav(index, item.id)">{{item.name}}</view>
			</view>
		</view>
		<view class="content">
			<view class="kong" v-if="list.length == 0">-- 暂无数据 --</view>
			<view class="qrcnav" v-for="(item,index) in list" :key="index">
				<view class="prctit">{{item.money}}元抵扣券</view>
				<view class="prctit">类型：{{item.type == 1 ? '通用' : item.type == 2 ? '包场' : item.type == 3 ? '散客' : ''}}</view>
				<view class="navbox">
					<view class="">
						<view class="ittiem">有效期至{{item.dead_time_text}}</view>
						<view class="anbox">
							<view class="anlfet" v-if="item.status == 1" @click="gotoent">立即使用</view>
							<view class="anlfet gray" v-else-if="item.status == 2">已使用</view>
							<view class="anlfet gray" v-else-if="item.status == 3">已过期</view>
							<view class="anriat" @click="lokexq(item)">查看详情</view>
						</view>
					</view>
					<image class="prcimage" :src="item.pic" mode=""></image>
				</view>
			</view>
		</view>
		<up-popup :show="show" mode="center" @close="close" round="20rpx">
			<view class="pobox">
				<view class="boxtit">包场{{money}}元折扣券</view>
				<view class="">优惠券试用规则</view>
				<view class="">
					1.凭本优惠券预约场地可享受{{money}}元减免，无门槛使用，本卷优惠金额不可叠加享受。<br />2.本优惠券仅限使用一次。<br />3优惠券不可与平台其他优惠活动或其他优惠同享，不可兑换现金，不找零。<br />4.本优惠券不可转赠、贩卖、截图、伪造、变造无效。
				</view>
				<view class="guanbi" @click="show=false">关闭</view>
			</view>
		</up-popup>
	</view>
	<cc-myTabbar :tabBarShow="2"></cc-myTabbar>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import request from '../../utils/request';
	let token = ref('')
	let tabLists = ref([
		{
			name: '全部',
			id: -1
		},
		{
			name: '通用',
			id: 1
		},
		{
			name: '包场',
			id: 2
		},
		{
			name: '散客',
			id: 3
		}
	])
	let tabIndex = ref(0)
	let type = ref(-1)
	let navList = ref([
		{
			name: '全部',
			id:-1
		},
		{
			name: '待使用',
			id:1
		},
		{
			name: '已使用',
			id:2
		},
		{
			name: '已过期',
			id:3
		}
	])
	let navIndex = ref(0)
	let status = ref(-1)
	onMounted(() => {
		token.value = uni.getStorageSync('token')
		getData()
		// request.post('Usercoupons/lists', {
		// 	data: {
		// 		type: '1',
		// 		status: '1'
		// 	},
		// 	header: {
		// 		"token": token.value,
		// 		'Content-Type': 'application/json'
		// 	}
		// }).then(res => {
		// 	console.log(res);
		// 	list.value = res.data
		// }).catch(err => {
		// 	console.log(err);
		// })
	})

	let show = ref(false)
	let list = ref([])
	let rem = ref([])
	let money = ref(0)
	const gotoent = () => {
		uni.navigateTo({
			url: '/pages/entrance/entrance'
		})
	}
	
	const getData = () => {
		request.post('Usercoupons/lists', {
			data: {
				status: status.value
			},
			header: {
				"token": token.value,
				'Content-Type': 'application/json'
			}
		}).then(res => {
			console.log(res);
			list.value = res.data
		}).catch(err => {
			console.log(err);
		})
	}
	const sankeewm = (item) => {
		const order_num = item.order_num
		request.post('Order/makeQrcode', {
			data: {
				order_num: order_num
			},
			header: {
				"token": token.value
			}
		}).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}
	const lokexq = (item) => {
		show.value = true
		money.value = item.money
	}
	const close = () => {
		show.value = false
	}
	onReady(() => {
		uni.hideTabBar();
	})
	
	// const handleTab = (index, id) => {
	// 	tabIndex.value = index
	// 	type.value = id
	// 	getData()
	// }
	
	const handleNav = (index, id) => {
		navIndex.value = index
		status.value = id
		getData()
	}
</script>

<style scoped lang="scss">
	.wrap {
		min-height: 100vh;
		height: fit-content;
		background-color: #F2F2F2;
		box-sizing: border-box;
		
		.header {
			width: 100%;
			height: 60px;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			z-index: 1;
			
			.tab {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 60px;
				box-sizing: border-box;
				
				.item {
					flex: 1;
					text-align: center;
					font-size: 16px;
					border-bottom: 2px solid transparent;
					padding: 15px 0;
					box-sizing: border-box;
				}
				
				.active {
					border-color: #78b0fa;
					color: #0a84ff;
				}
			}
			
		}
		.content {
			padding-top: 60px;
		}
	}
	.kong {
		display: flex;
		justify-content: center;
		padding: 20rpx;
		color: #666;
	}

	.qrcbox {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		padding-bottom: 20rpx;
	}

	.qrctoop {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.tabnav {
		height: 60rpx;
		line-height: 60rpx;
		color: #666;
	}

	.istab {
		border-bottom: 3px solid #10c696;
	}

	.qrcnav {
		width: 720rpx;
		height: fit-content;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 24rpx;
		box-shadow: 0 0 25px -15px rgba(0, 0, 0, .5);
		padding: 24rpx;
		box-sizing: border-box;
	}

	.prctit {
		width: 100%;
		margin-bottom: 20rpx;
		font-size: 24rpx;

	}

	.navbox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ittiem {
		font-size: 13px;
	}

	.anbox {
		display: flex;
		align-items: center;
		margin-top: 35rpx;
	}

	.anlfet {
		width: 140rpx;
		height: 50rpx;
		color: #fff;
		background-color: #10c696;
		line-height: 50rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 14px;
		box-sizing: border-box;
	}

	.anriat {
		width: 140rpx;
		height: 50rpx;
		color: #10c696;
		border: 2px solid #10c696;
		line-height: 49rpx;
		text-align: center;
		font-size: 14px;
		margin-left: 10rpx;
		border-radius: 40rpx;
		box-sizing: border-box;
	}

	.prcimage {
		width: 140rpx;
		height: 120rpx;
	}

	.sanke {
		width: 720rpx;
		height: 220rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		box-shadow: 0 0 25px -15px rgba(0, 0, 0, .5);
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.pobox {
		width: 600rpx;
		height: 800rpx;
		font-size: 14px;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.boxtit {
		width: 100%;
		text-align: center;
		height: 144rpx;
		line-height: 144rpx;
	}

	.guanbi {
		margin: 0 auto;
		margin-top: 206rpx;
		width: 360rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #10c696;
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
	}
	
	.gray {
		background-color: #666;
	}

	page {
		padding-bottom: 140rpx;

	}
</style>